<template>
    <div>
        <el-container>
            <el-header>
                  <el-link :underline="false" type="primary" href="/login" style="margin-left:13%;float:left">登录</el-link>
                  <el-link :underline="false" href="/register" target="_blank" style="margin-left:2%;float:left">注册</el-link>
                  <el-link :underline="false" href="/shopregister" target="_blank" style="margin-right:13%;float:right">申请开店</el-link>
                  <el-link :underline="false" href="/purchased" target="_blank" style="margin-right:2%;float:right">已购商品</el-link>
            </el-header>

            <el-main>
                <el-row>
                    <el-col :span="8">
                        <div class="demo-image" style="padding-left:50%">
                            <img src="../assets/warren_market.png" style="width: 240px; height: 180px">
                        </div>
                    </el-col>
                    <el-col :span="8" style="padding-top:4%">
                        <div class="demo-input-suffix" style="padding-left:50px">
                            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input" style="width:600px">
                                <el-button slot="append" icon="el-icon-search" @click="handleClick"></el-button> <!--将文本内容输出到data里的input中 这个button绑定方法获取input数据进行axios-->
                            </el-input>
                        </div>
                    </el-col>
                </el-row >

                <div style="margin-top:3%;margin-left:13%;margin-right:13%;border-radius: 2px;background-color:#FFFFFF">

                    <!--el-breadcrumb separator-class="/" style="font-size:20px;padding-top:1%">
                        <el-breadcrumb-item style="padding-left:65px"><b>主题市场</b></el-breadcrumb-item>
                        <el-breadcrumb-item style="padding-left:120px"><a href="/1">秒杀活动</a></el-breadcrumb-item>
                        <el-breadcrumb-item><a href="/2">优惠券</a></el-breadcrumb-item>
                        <el-breadcrumb-item><a href="/3">商家中心</a></el-breadcrumb-item>
                    </el-breadcrumb-->

                    <div style="padding-top:15px">
                        <p style="padding-left:65px;float:left;font-size:20px"><b>主题市场</b></p>
                        <el-link style="margin-left:140px;font-size:20px" href="/seckill_index">秒杀活动</el-link>
                        <el-link style="margin-left:20px;font-size:20px" href="/shop">商家中心</el-link>
                    </div>

                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">
                                <el-dropdown style="padding-top:20px;padding-left:10%" placement="right" show-timeout="1">
                                    <div>
                                        <span>
                                            <el-link :underline="false" href="/goods?category=computer" target="_blank">电脑</el-link>&nbsp;&nbsp;/
                                        </span>
                                        <span>
                                            <el-link :underline="false" href="/goods?category=phone" target="_blank">手机</el-link>&nbsp;&nbsp;/
                                        </span>
                                        <span>
                                            <el-link :underline="false" href="/goods?category=table_computer" target="_blank">平板</el-link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-arrow-right"></i>
                                        </span>
                                    </div>
                                    <el-dropdown-menu>
                                        <div style="width:400px">
                                            <h3 style="padding-left:10px">笔记本电脑</h3>
                                            <el-row :gutter="20" style="padding-top:10px;font-size:13px;padding-left:10px">
                                                <el-col :span="6"><router-link :to="'/goods?category=computer&brand=HASEE'" style="color:black">HASEE</router-link></el-col>
                                                <el-col :span="6"><router-link :to="'/goods?category=computer&brand=外星人'" style="color:black">外星人</router-link></el-col>
                                                <el-col :span="6"><router-link :to="'/goods?category=computer&brand=华为'" style="color:black">华为</router-link></el-col>
                                                <el-col :span="6"><router-link :to="'/goods?category=computer&brand=华硕'" style="color:black">华硕</router-link></el-col>
                                            </el-row>
                                            <el-row :gutter="20" style="padding-top:10px;font-size:13px;padding-left:10px">
                                                <el-col :span="6"><router-link :to="'/goods?category=computer&brand=小米'" style="color:black">小米</router-link></el-col>
                                                <el-col :span="6"><router-link :to="'/goods?category=computer&brand=联想'" style="color:black">联想</router-link></el-col>
                                                <el-col :span="6"><router-link :to="'/goods?category=computer&brand=ROG'" style="color:black">ROG</router-link></el-col>
                                            </el-row>
                                            <br>
                                            <h3 style="padding-left:10px">手机</h3>
                                            <el-row :gutter="20" style="padding-top:10px;font-size:13px;padding-left:10px">
                                                <el-col :span="6"><router-link :to="'/goods?category=phone&brand=Apple'" style="color:black">Apple</router-link></el-col>
                                                <el-col :span="6"><router-link :to="'/goods?category=phone&brand=Realme'" style="color:black">Realme</router-link></el-col>
                                                <el-col :span="6"><router-link :to="'/goods?category=phone&brand=IQOO'" style="color:black">IQOO</router-link></el-col>
                                                <el-col :span="6"><router-link :to="'/goods?category=phone&brand=黑鲨'" style="color:black">黑鲨</router-link></el-col>
                                            </el-row>
                                            <el-row :gutter="20" style="padding-top:10px;font-size:13px;padding-left:10px">
                                                <el-col :span="6"><router-link :to="'/goods?category=phone&brand=华为'" style="color:black">华为</router-link></el-col>
                                                <el-col :span="6"><router-link :to="'/goods?category=phone&brand=OPPO'" style="color:black">OPPO</router-link></el-col>
                                                <el-col :span="6"><router-link :to="'/goods?category=phone&brand=VIVO'" style="color:black">VIVO</router-link></el-col>
                                            </el-row>
                                            <br>
                                            <h3 style="padding-left:10px">平板</h3>
                                            <el-row :gutter="20" style="padding-top:10px;font-size:13px;padding-left:10px">
                                                <el-col :span="6"><router-link :to="'/goods?category=table_computer&brand=Apple'" style="color:black">Apple</router-link></el-col>
                                                <el-col :span="6"><router-link :to="'/goods?category=table_computer&brand=小米'" style="color:black">小米</router-link></el-col>
                                                <el-col :span="6"><router-link :to="'/goods?category=table_computer&brand=华为'" style="color:black">华为</router-link></el-col>
                                                <el-col :span="6"><router-link :to="'/goods?category=table_computer&brand=微软'" style="color:black">微软</router-link></el-col>
                                            </el-row>
                                            <el-row :gutter="20" style="padding-top:10px;font-size:13px;padding-left:10px">
                                                <el-col :span="6"><router-link :to="'/goods?category=table_computer&brand=联想'" style="color:black">联想</router-link></el-col>
                                            </el-row>
                                        </div>
                                    </el-dropdown-menu>
                                </el-dropdown>
                                <br>
                                <el-dropdown style="padding-top:20px;padding-left:10%" placement="right" show-timeout="1">
                                    <div>
                                        <span>
                                            <el-link :underline="false" href="/" target="_blank">手表</el-link>&nbsp;&nbsp;/
                                        </span>
                                        <span>
                                            <el-link :underline="false" href="/" target="_blank">眼镜</el-link>&nbsp;&nbsp;/
                                        </span>
                                        <span>
                                            <el-link :underline="false" href="/" target="_blank">饰品</el-link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-arrow-right"></i>
                                        </span>
                                    </div>
                                    <el-dropdown-menu>
                                        <div style="width:100px">
                                            <h3 style="padding-left:10px">暂无数据</h3>
                                        </div>
                                    </el-dropdown-menu>
                                </el-dropdown>
                                <el-dropdown style="padding-top:20px;padding-left:10%" placement="right" show-timeout="1">
                                    <div>
                                        <span>
                                            <el-link :underline="false" href="/" target="_blank">男鞋</el-link>&nbsp;&nbsp;/
                                        </span>
                                        <span>
                                            <el-link :underline="false" href="/" target="_blank">男装</el-link>&nbsp;&nbsp;/
                                        </span>
                                        <span>
                                            <el-link :underline="false" href="/" target="_blank">箱包</el-link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-arrow-right"></i>
                                        </span>
                                    </div>
                                    <el-dropdown-menu>
                                        <div style="width:100px">
                                            <h3 style="padding-left:10px">暂无数据</h3>
                                        </div>
                                    </el-dropdown-menu>
                                </el-dropdown>
                                <el-dropdown style="padding-top:20px;padding-left:10%" placement="right" show-timeout="1">
                                    <div>
                                        <span>
                                            <el-link :underline="false" href="/" target="_blank">零食</el-link>&nbsp;&nbsp;/
                                        </span>
                                        <span>
                                            <el-link :underline="false" href="/" target="_blank">生鲜</el-link>&nbsp;&nbsp;/
                                        </span>
                                        <span>
                                            <el-link :underline="false" href="/" target="_blank">茶酒</el-link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-arrow-right"></i>
                                        </span>
                                    </div>
                                    <el-dropdown-menu>
                                        <div style="width:100px">
                                            <h3 style="padding-left:10px">暂无数据</h3>
                                        </div>
                                    </el-dropdown-menu>
                                </el-dropdown>
                                <el-dropdown style="padding-top:20px;padding-left:10%" placement="right" show-timeout="1">
                                    <div>
                                        <span>
                                            <el-link :underline="false" href="/" target="_blank">美妆</el-link>&nbsp;&nbsp;/
                                        </span>
                                        <span>
                                            <el-link :underline="false" href="/" target="_blank">彩妆</el-link>&nbsp;&nbsp;/
                                        </span>
                                        <span>
                                            <el-link :underline="false" href="/" target="_blank">个护</el-link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-arrow-right"></i>
                                        </span>
                                    </div>
                                    <el-dropdown-menu>
                                        <div style="width:100px">
                                            <h3 style="padding-left:10px">暂无数据</h3>
                                        </div>
                                    </el-dropdown-menu>
                                </el-dropdown>
                                <el-dropdown style="padding-top:20px;padding-left:10%" placement="right" show-timeout="1">
                                    <div>
                                        <span>
                                            <el-link :underline="false" href="/" target="_blank">房产</el-link>&nbsp;&nbsp;/
                                        </span>
                                        <span>
                                            <el-link :underline="false" href="/" target="_blank">家具</el-link>&nbsp;&nbsp;/
                                        </span>
                                        <span>
                                            <el-link :underline="false" href="/" target="_blank">建材</el-link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-arrow-right"></i>
                                        </span>
                                    </div>
                                    <el-dropdown-menu>
                                        <div style="width:100px">
                                            <h3 style="padding-left:10px">暂无数据</h3>
                                        </div>
                                    </el-dropdown-menu>
                                </el-dropdown>
                                <el-dropdown style="padding-top:20px;padding-left:10%" placement="right" show-timeout="1">
                                    <div>
                                        <span>
                                            <el-link :underline="false" href="/" target="_blank">厨房</el-link>&nbsp;&nbsp;/
                                        </span>
                                        <span>
                                            <el-link :underline="false" href="/" target="_blank">收纳</el-link>&nbsp;&nbsp;/
                                        </span>
                                        <span>
                                            <el-link :underline="false" href="/" target="_blank">清洁</el-link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="el-icon-arrow-right"></i>
                                        </span>
                                    </div>
                                    <el-dropdown-menu>
                                        <div style="width:100px">
                                            <h3 style="padding-left:10px">暂无数据</h3>
                                        </div>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content bg-purple">
                                  <div class="block" style="padding-top:20px">
                                      <el-carousel height="290px">
                                        <el-carousel-item v-for="item in 3" :key="item">
                                            <img :src="require('../assets/'+item+'.jpg')" height="100%" width="100%">
                                        </el-carousel-item>
                                      </el-carousel>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="4" id="indexu">
                            <div v-if="this.data.user_cookie != null">
                                <indexur></indexur>
                            </div>
                            <div v-else>
                                <indexrl></indexrl>
                            </div>
                            <!--div class="grid-content bg-purple" id="index">
                                <el-avatar icon="el-icon-user-solid" style="margin-left:105px;margin-top:20px"></el-avatar>
                                <p style="padding-left:95px;padding-top:10px">Hi!&nbsp;你好</p>
                                <div style="padding-top:20px">
                                    <el-row>
                                        <el-col :span="8"><div class="grid-content bg-purple" style="padding-left:30px"><div style="width:80px;height:28px;border-style:solid;border-color:#409EFF;background-color:#409EFF;border-radius:5px"><el-link :underline="false" style="margin-left:25px;color:white" href="/login" target="_blank">登录</el-link></div></div></el-col>
                                        <el-col :span="8"><div class="grid-content bg-purple" style="padding-left:80px"><div style="width:80px;height:28px;border-style:solid;border-color:#409EFF;background-color:#409EFF;border-radius:5px"><el-link :underline="false" style="margin-left:25px;color:white" href="/register" target="_blank">注册</el-link></div></div></el-col>
                                    </el-row>
                                </div>
                                <div style="padding-top:20px">
                                    <img :src="require('../assets/4.png')" style="margin-left:30px;width:200px;height:110px">
                                </div>
                            </div-->
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="3">
                            <div class="grid-content bg-purple">
                                <p style="padding-top:20px;padding-left:25px;font-size:25px">有好货</p>
                            </div>
                        </el-col>
                        <el-col :span="3">
                            <div class="grid-content bg-purple">
                                <el-tag effect="dark" style="margin-top:26px;margin-left:-30px" size="small">
                                    全民好货
                                </el-tag>
                            </div>
                      </el-col>
                    </el-row>

                    <div style="padding-left:25px">
                        <el-row :gutter="20">
                            <el-col :span="6" v-for="product in data.products" :key="product">
                                <div class="grid-content bg-purple" style="padding-top:20px">
                                    <router-link :to="'/detail?category='+product.category+'&id='+product.product_id" style="color:black">
                                        <img :src="require('@/assets/'+product.category+'/'+product.product_id+'/1.jpg')" style="width: 200px; height: 200px"><br>
                                        <p style="width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px">{{product.title}}</p>
                                        <el-row :gutter="20" style="padding-top:10px">
                                            <el-col :span="6"><div class="grid-content bg-purple"><p style="color:#D69C1F">￥{{product.price}}</p></div></el-col>
                                            <el-col :span="18"><div class="grid-content bg-purple"><p style="padding-left:10px">{{product.buyer}}人购买</p></div></el-col>
                                        </el-row>
                                    </router-link>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                
            </el-main>
        </el-container>
    </div>
</template>

<script>
import Indexrl from '../components/indexrl.vue';
import Indexur from '../components/indexur.vue';

export default {
    name: 'index',
    components:{
        Indexrl,
        Indexur
    },
    data() {
      return {
        user_cookie:'',
        input: '',
        data:{
            "products": []
        }
      }
    },
    methods: {
      handleClick() {
        this.$router.push("/productsshow?title="+this.input)
      },
      push(){
        alert("OK")
      }
    },
    mounted(){
        this.$axios.get("/api/index/products").then(res=>{
            this.data.products = res.data
            console.log(res);
        });
        this.data.user_cookie = this.$cookies.get("username");
    }
}
</script>

<style scoped>
    .el-header{
        line-height: 60px;
    }
    .el-main {
        background-color:#E4E7ED;
        /*margin-left: 13%;
        margin-right: 13%;
        */
    }
    .el-dropdown-link {
        cursor: pointer;
        color: black;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
        text-align: center;
    }
    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }
    
    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    a{
        text-decoration: none;
    }
    .router-link{
        text-decoration: none;
    }
</style>